<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid red;
            margin: 10px;
        }
        .main{
            border: 2px solid blue;
            /*height: 220px;*/
            /*溢出处理
            hidden:隐藏
            auto:自动添加滚动条
            scroll:强制添加垂直水平滚动条 */
            /*overflow: hidden;*/
        }
        /*在div里面的最后*/
        .main:after{
            content: "";/*添加的内容*/
            clear: both;/*清楚浮动*/
            display: block;/*设置为块级元素*/
        }
        .main div{
            width: 100px;
            height: 100px;
            float: left;
        }
        /*h1{
            !*清除浮动 : 清楚前面元素浮动之后对自己产生的影响*!
            clear: both;!*left right both*!
        }*/
        /*在元素的特性不改变的前提下保证div在同一行
        浮动 : 将元素进行水平排序对齐 (默认永远不会出现元素覆盖元素的情况)

        父级塌陷 : 由于内部元素脱离原本的标准文档流(浮动)
                  导致父节点无法找到内部元素的高度,进而出现塌陷问题
        影响 : 父级外层的元素受到影响,导致页面布局错误

        解决方案 ?
            方案一 : 1.在父节点内的最后添加块级元素
                    2.使用clear清楚浮动产生的影响
                    问题 : 废代码过多(html节点)
            方案二 : 给父级添加高度
                    问题 : 不够灵活,不随着内容高度的变化而变化
            方案三 : 给父级添加overflow属性
                    问题 : 不是专门用来解决父级塌陷的,父级如果有下拉框,无法使用
            方案四 : 在父级元素的样式中进行设置  :after
                    优势 : 灵活变化 没有多余的废代码

        */
    </style>
</head>
<body>
<div class="main">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <!--<h1></h1>-->
</div>
哈哈哈
</body>
</html>